<template>
	<u-modal :show="show" :negativeTop="200" title="账户提现" confirmText="确定" showCancelButton confirmColor="#FD8906"
		cancelColor="#000" @confirm="save" @cancel="show = false" @close="show = false" zoom>
		<view class="f-1 w100 f14">
			<view class="p-10-0 f-bt f-y-c">
				<view class="left c9 f-g-0 mr10">可提现余额</view>
				<view class="f-g-1">
					{{withForm.amount}}元
				</view>
			</view>
			<view class="p-10-0">
				<view class="f-bt f-y-c">
					<view class="left c9 f-g-0 mr10"><text class="crb">*</text>提现金额</view>
					<view class="f-g-1">
						<u--input placeholder="请输入提现金额" :customStyl="{background:'#f3f3f3'}" v-model="money"
							@input="jisuan">
						</u--input>
					</view>
				</view>
				<view class="f12 c9 mt5">
					<view>
						最低提现金额{{ withdrawalSet.money }}，提现间隔周期{{ withdrawalSet.period }}天
					</view>
					<view class="mt5">
						提现手续费：每笔抽取费率{{ withdrawalSet.rate }}%，最低{{ withdrawalSet.min }}，最高{{ withdrawalSet.max }}</view>
				</view>
			</view>
			<view class="p-10-0 f-bt f-y-c">
				<view class="left c9 f-g-0 mr10">手续费</view>
				<view class="f-g-1" v-show="money && sxf">
					{{sxf}}元
				</view>
			</view>
			<view class="p-10-0 f-bt f-y-c">
				<view class="left c9 f-g-0 mr10">预计到帐</view>
				<view class="f-g-1" v-show="money && dzje">
					{{dzje}}元
				</view>
			</view>
			<view class="p-10-0 f-bt f-y-c">
				<view class="left c9 f-g-0 mr10">提现方式</view>
				<view class="f-g-1" v-if="withForm.withdrawalConfig">
					{{ withForm.withdrawalConfig.default == "wx" ? "微信": withForm.withdrawalConfig.default == "ali" ? "支付宝" : "银行卡" }}
				</view>
			</view>
		</view>
	</u-modal>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
	export default {
		components: {

		},
		props: {
			mode: {
				type: String,
				default: () => 'single'
			},
			v: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				withForm: {},
				withdrawalSet: {},
				show: false,
				money: "",
				sxf: "",
				dzje: "",
			}
		},
		computed: {
			...mapState({
				storeId: state => state.storeId,
			}),
		},
		methods: {
			open(v, ws) {
				if (v && ws) {
					this.withForm = JSON.parse(JSON.stringify(v))
					this.withdrawalSet = JSON.parse(JSON.stringify(ws))
				}
				this.money = ''
				this.show = true
			},
			close() {
				this.show = false
			},
			jisuan(val) {
				if(val<0)this.money=1
				if (
					this.withdrawalSet.rate >= 0 &&
					this.withdrawalSet.money >= 0 &&
					this.withdrawalSet.min >= 0
				) {
					if (+this.money > +this.withForm.amount) {
						this.money = this.withForm.amount;
					}
					this.sxf = (this.money * this.withdrawalSet.rate) / 100;
					this.dzje = +this.money - +this.sxf;
					if (this.sxf && +this.sxf < +this.withdrawalSet.min) {
						this.sxf = this.withdrawalSet.min;
						this.dzje = +this.money - +this.sxf;
					}
				}
			},
			async save() {
				if (!this.money) {
					return uni.showToast({
						title: '请输入提现金额',
						icon: 'none'
					})
				}
				const {
					msg
				} = await this.beg.request({
					url: this.api.storeWithdrawal,
					method:'POST',
					data: { type: 1, withdrawalMoney: this.money ,storeId:this.storeId}
				})
				uni.showToast({
					title: msg,
					icon: 'none'
				})
				this.show = false
				this.$emit('save')
			},
		},
	}
</script>

<style lang="scss" scoped>
	.left {
		width: 140rpx;
		text-align: right;
	}
</style>